// custom-tab-bar/index.js

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import { store } from "../store/store";

Component({
	/**
	 * 配置组件样式隔离
	 */
	options: {
		styleIsolation: "shared"
	},
	/**
	 * 配置监听器
	 */
	observers: {
		"sum": function(newValue) {
			this.setData({
				"list[1].info": newValue
			});
		},
	},
	/**
	 * 配置 behaviors
	 * 通过 storeBindingsBehavior 来实现自动绑定
	 */
	behaviors: [storeBindingsBehavior],
	/**
	 * 将 Store 中的成员绑定到组件中
	 */
	storeBindings: {
    store,
    fields: {
			sum: "sum",
			active: "activeTabBarIndex"
    },
    actions: {
			updateActiveTabBarIndex: "updateActiveTabBarIndex"
		},
	},
	
  /**
   * 组件的属性列表
   */
  properties: {

	},
	
  /**
   * 组件的初始数据
   */
  data: {
		"list": [
      {
        "pagePath": "/pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "/pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
				"selectedIconPath": "/images/tabs/message-active.png",
				info: 0
      },
      {
        "pagePath": "/pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ],
	},

  /**
   * 组件的方法列表
   */
  methods: {
		/**
		 * 根据索引值切换 tabBar 标签
		 * @param {*} event 事件对象
		 */
		onChange(event) {
			// event.detail 的值为当前选中项的索引
			this.updateActiveTabBarIndex(event.detail);
			wx.switchTab({
				url: this.data.list[event.detail].pagePath,
			});
		},
  }
})
